<template>
  <!-- 登录组件 -->
  <view class="page-login">
    <view >
      <view class="login-box">
        <view class="header-box">
          <view class="navphoto">
            <image src="https://small.qaqavr.com/img/zhongrui/avatar.png" mode=""></image>
          </view>
        </view>
        
        <view class="login-font">
          <view style="color: #000000;font-size: 30rpx;margin-bottom: 30rpx;">申请获取一下权限</view>
          <text style="color: #333333;font-size: 26rpx;">获取你的公开信息 (昵称丶头像等)</text>
        </view>
        <!--新版登录方式-->
       <view class="login-btn">
          <u-button  type="primary" shape="circle" @click="login">授权登录</u-button>
       </view>
    
      </view>
    </view>
  
  </view>
</template>
<script>
  export default {
    name:'loginPage',
    data() {
      return {
    nickName:'',//微信昵称
    avatarUrl:'' , //头像路径
    openid:'',//用户的openid 用于token
    
    userList:{}
      };
    },
    onLoad() {},
    onShow() {},
    methods: {
      
      login() {
      			// 提醒:如果遇到this未定义问题,需要在方法开始的时候，执行下面的代码，然后将后面的this换成that。
      			// let that = this
            
      			// 步骤1：调用uni.getUserProfile()，弹出授权窗口
      			uni.getUserProfile({
      				desc: '登录', // 这个参数是必须的，desc属性（声明获取用户个人信息后的用途）后续会展示在弹窗中，请开发者谨慎填写。
      				success: (res) => {
      					// 用户点击了允许，拿到用户信息
      					console.log("用户信息: " + JSON.stringify(res.userInfo));
      					let userInfo = res.userInfo;
                console.log('我是userinfo======>' , userInfo)
      					//  步骤2：调用uni.login()，获取code
      					uni.login({
      						provider: 'weixin', // 登录服务提供商，这里是weixin
      						success: (res2) => {
      							uni.showLoading({
      								title: '登录中'
      							})
      							// 获得code
      							var code = res2.code
      							console.log("获取code成功: " + JSON.stringify(res2));
      							// 步骤3：向后端服务器发送请求，带上参数：code和用户信息
      							uni.request({
                      url:  uni.$http.baseUrl + '/wx/authorizedLogin?code='+ code,
      								method: 'GET',
      								header: {},
      								data: {},
      								success: (res3) => {
      									// 登录成功
      									console.log('登录成功:' + JSON.stringify(res3));
      									uni.hideLoading()
                        const { data } = res3
                         console.log('我是成功信息' , data)
      									// 步骤4：处理业务逻辑
      									// 比如：更换昵称和头像
                        this.openid = data.data.openid
                        console.log(' this.openid' ,  this.openid)
                        uni.setStorageSync('openid' , this.openid )
      									this.nickName = userInfo.nickName
      									this.avatarUrl = userInfo.avatarUrl
                          let loginsuccess = {
                            nickName  : this.nickName , 
                            avatarUrl : this.avatarUrl,
                            openid :this.openid
                          }
                          
                         uni.setStorageSync('userData' , loginsuccess)
                          console.log('3424242424' , loginsuccess )
                     
                          uni.reLaunch({
                          	  url:'../mine/mine'
                          	})
                          
                     
                        uni.showToast({
                        	title: '登录成功',
                        	icon: 'none'
                        });
      								},
      								fail: (err) => {
      									// 登录失败
      									uni.hideLoading()
      									uni.showToast({
      										title: '登录失败',
      										icon: 'none'
      									});
      								}
      							});
      						}
      					})
      				},
      				fail: (err) => {
      					// 用户点击了拒绝
      					uni.showToast({
      						title: '取消成功',
      						icon: 'none'
      					})
      					console.log("用户点击了拒绝" + JSON.stringify(err));
      				}
      			})
      		}
   
    }
  }
</script>
<style lang="scss" scoped>

  .page-login {
    height: 100%;
    padding: 50rpx 30rpx;
    .login-box {
      height: 500rpx;
      .header-box{
        width: 100%;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #C0C0C0;
        .navphoto {
          width: 130rpx;
          height: 130rpx;
          border-radius: 50%;
          image{
            width: 100%;
            height: 100%;
          }
        }
      }
      .login-font {
        height: 150rpx;
        width: 100%;
        margin-top: 50rpx;
        margin-bottom: 50rpx;
      }
      .login-btn {
        width: 100%;
      }
   
    }
  }
</style>
